import React, { useEffect, useRef } from 'react';
import { Animated, View, StyleSheet } from 'react-native';
import { px2dp } from '~/utils/px2dp';

const BlinkingCircle = () => {
    const fadeAnim = useRef(new Animated.Value(1)).current;

    useEffect(() => {
        const blink = () => {
            Animated.sequence([
                Animated.timing(fadeAnim, {
                    toValue: 0,
                    duration: 1000,
                    useNativeDriver: true,
                }),
                Animated.timing(fadeAnim, {
                    toValue: 1,
                    duration: 1000,
                    useNativeDriver: true,
                }),
            ]).start(() => blink());
        };

        blink();
    }, [fadeAnim]);

    return (
        <View style={styles.outerCircle}>
            <Animated.View
                style={[
                    styles.innerCircle,
                    {
                        opacity: fadeAnim,
                    },
                ]}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    outerCircle: {
        width: px2dp(50),
        height: px2dp(50),
        borderRadius: px2dp(30),
        backgroundColor: 'rgba(255, 255, 255, 0.16)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    innerCircle: {
        width: px2dp(20),
        height: px2dp(20),
        borderRadius: 40,
        backgroundColor: '#66EFFE',
    },
});

export default BlinkingCircle;
